<template>
    <div class="mask" :class="{ 'active': maskNum === num }">
        <div class="title" @click="changeMasks">
            <div class="t-font">营运地区</div>
            <div class="t-icon"><el-icon>
                    <CaretBottom />
                </el-icon></div>
        </div>
        <div class="m-area" v-for="(item, i) in areaList.areaList.value" :key="i">
            <div class="province">
                {{ item.areaName }}
            </div>
            <div class="market" v-for="(items, a) in item.children" :key="a">
                <div class="markets">
                    {{ items.areaName }}
                </div>
                <div style="display: flex;">
                    <div class="marea-box" v-for="(itema, b) in items.children" :key="b">
                    <div class="shop-name">
                        {{itema.areaName}}({{ itema.planNum }})
                    </div>
                    <div class="shop-num">
                        商家数：{{ itema.collectedNum }}
                    </div>
                </div>
                </div>
            </div>

        </div>
    </div>
</template>

<script setup >
import { getOperateAreaList } from "@/apis/products/selection";
import { ref, toRaw,reactive,onMounted,onUnmounted } from "vue";
import { throttle } from "../untils/debounce";
const emit = defineEmits(['changeMasks']);
const props = defineProps({
    maskNum: {
        type: Number,
        default: -99
    },
    num: {
        type: Number,
        default: -92
    },
    productId: {
        type: String,
        default: ''
    }
})

const areaList = reactive({
    areaList: []
})
const changeMasks = () => {
    console.log(props);
    emit('changeMasks')
}
const getOperateAreaLists = (id) => {
    const postData = {
        productId: id
    }
    getOperateAreaList(postData).then(res => {
        areaList.areaList.value = res.data;
        console.log(areaList.areaList.value);
    }).catch(error => {
        console.log(error);
    })
}
onMounted(() => {
    // getOperateAreaLists();
})
defineExpose({
    getOperateAreaLists
})
</script>

<style lang='scss' scoped>
@mixin flex-center {
    display: flex;
    justify-content: center;
    align-items: center;
}

.mask {
    position: absolute;
    top: 400px;
    width: 294px;
    color: #fff;
    overflow: auto;
    height: 400px;
    padding: 10px;
    background: rgba(0, 0, 0, 0.5);
    border-radius: 10px 10px 10px 10px;
    left: 0px;
    backdrop-filter: blur(10px);
    transition: all .5s;

    &.active {
        transition: all .5s;
        top: 0;
    }

    .title {
        display: flex;
        cursor: pointer;
        justify-content: space-between;
    }

    .m-area {
        padding-top: 20px;
        font-family: Microsoft YaHei, Microsoft YaHei;
        font-weight: 400;
        color: #FFFFFF;
        cursor: pointer;
        line-height: 24px;
        text-align: left;
        font-style: normal;
        text-transform: none;

        .province {
            font-size: 14px;
            margin-bottom: 4px;
        }

        .market {
            font-size: 12px;
            margin-bottom: 8px;
        }

        .marea-box {
            margin-right: 10px;
            cursor: pointer;
            @include flex-center();
            font-family: Microsoft YaHei, Microsoft YaHei;
            font-weight: 400;
            font-size: 10px;
            flex-direction: column;
            color: #3D3D3D;
            line-height: 24px;
            text-align: left;
            font-style: normal;
            text-transform: none;
            border-radius: 4px 4px 4px 4px;

            .shop-name {
                background: #fff;
                border-radius: 4px 4px 4px 4px;
                padding: 0 5px;
            }

            .shop-num {
                font-family: Microsoft YaHei, Microsoft YaHei;
                font-weight: 400;
                margin-top: 2px;
                font-size: 10px;
                color: rgba(255, 255, 255, 0.75);
                line-height: 20px;
                text-align: left;
                font-style: normal;
                text-transform: none;
            }
        }
    }
}</style>